$(function() {
    var todolist = {
        init: function() {
            // 在调用两个函数
            this.catchElement(); //获取所有要操作的元素
            this.bindEvent(); //所有要交互的动作
        },
        // 获取要操作的元素
        catchElement: function() {
            this.task = $('.task');
            this.add = $('.add');
            this.todolist = $('.todolist');
            this.check = $('.check');
            this.con = $('.con');
            this.edit = $('.edit');
            this.del = $('.del');
            this.all = $('.all');
            this.done = $('.done');
            this.remove = $('.remove');
            this.donelist = $('.donelist');
            this.box = $('.box');
        },
        bindEvent: function() {
            var _this = this; //this指向的是todolist
            // 这个点击事件是为了
            // 让输入框输入的内容可以添加到代办事项中
            this.add.click(function() {
                    // 这样写不对，输入框是没有文本的，只有val值
                    // var text = $(this.add).siblings().text();
                    var text = _this.task.val();
                    if (!text) {
                        alert("输入框不能为空！");
                        _this.task.focus();
                        return;
                    }
                    var items = `
                <li>
                <input type="checkbox" class="check">
                <span class="con">${text}</span>
                <span class="edit">编辑</span>
                <span class="del">删除</span>
                </li>`
                        //把新添加的任务加入代办事项的尾部
                    _this.todolist.append(items);
                    $(this).siblings('.task').val("");
                })
                //编辑按钮的效果
            this.todolist.on('click', '.edit', function() {
                    var text = $(this).siblings('.con').text();
                    //用一个节点替换另一个节点 
                    $('<input type="text" class="ipt">').replaceAll($(this).siblings('.con'));
                    //每次只有一个ipt
                    $('.ipt').val(text).focus();
                })
                //编辑完成后失去焦点，input变为span
            this.todolist.on('blur', '.ipt', function() {
                    var text = $('.ipt').val();
                    if (!text) {
                        $(this).focus();
                        return;
                    }
                    var items = `<span class="con">${text}</span>`
                        //$里面可以放一个dom元素
                    $(items).replaceAll($(this));
                })
                //删除按钮要做的事情
            this.todolist.on('click', '.del', function() {
                    $(this).parent().remove();
                    $('.check').each(function(index, dom) {
                        var check = $(dom).prop('checked');
                        if (!check) {
                            _this.all.prop("checked", false);
                            return;
                        }
                        _this.all.prop('checked', true);
                    })

                })
                // 全选事件,当多选框全部都选中时，全选框选中
            this.todolist.on('click', '.check', function() {
                    $('.check').each(function(index, item) {
                        if (!$(item).prop('checked')) {
                            _this.all.prop("checked", false);
                            return false;
                        }
                        _this.all.prop('checked', true);
                    })
                })
                // 全选按钮事件
            this.all.click(function() {

                    if ($(this).prop('checked')) {
                        //这里要用这个,因为这时的check的有更新
                        $('.check').prop('checked', true);
                    } else {
                        $('.check').prop('checked', false);
                    }
                })
                // 批量处理事件
            this.box.on('click', '.done', function() {
                    $('.check').each(function(index, item) {
                        if ($(item).prop('checked')) {
                            var text = $(this).siblings('.con').text();
                            var dlist = `<li>${text}</li>`;
                            $('.donelist').append($(dlist));
                            $(item).parent().remove();
                        }
                    })
                    $('.all').prop('checked', false);
                })
                // 批量删除事件
            this.box.on('click', '.remove', function() {
                $('.check').each(function(index, item) {
                        if ($(item).prop('checked')) {
                            $(item).parent().remove();
                        }

                    })
                    // 批量处理后剩下的都是没勾选的
                $('.all').prop('checked', false);
            })
        }
    }
    todolist.init();
})